<template>
  <div class="container">
    <div class="mainBox">
      <div>
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          v-loading="loading"
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column prop="year,month" label="考勤月份" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.year }}-{{ scope.row.month }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="onWorkEmpTotal"
            label="当月在职人数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="attEmpTotal"
            label="考勤人数"
            align="center"
          ></el-table-column>
          <el-table-column prop="attRate" label="考勤率" align="center">
            <template slot-scope="scope">
              <p>{{ (scope.row.attRate * 100).toFixed(1) + '%' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="attDaysTotal"
            label="打卡天数"
            align="center"
          ></el-table-column>
          <el-table-column label="打卡总人次" align="center" fixed="right">
            <template slot-scope="scope">
              <el-link
                v-if="scope.row.attTotal"
                type="primary"
                @click="showAttendanceDetail(scope.row)"
                >{{ scope.row.attTotal }}人次</el-link
              >
              <span v-if="scope.row.attTotal == 0">{{
                scope.row.attTotal
              }}</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-if="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :requestUrl="requestUrl"
          :filterField="filterField"
        ></Pagination>
      </div>
    </div>

    <!-- 右侧弹窗 -->
    <el-drawer
      custom-class="brand-dialog-min-width"
      title=""
      :visible.sync="showKqDrawer"
      direction="rtl"
      size="55%"
    >
      <el-col :span="24" class="commomPadding searchInputWidth">
        <el-form
          :inline="true"
          :model="drawerKqfilterField"
          ref="searchConditions"
        >
          <el-form-item label="状态" class="row-padding-bottom">
            <el-select
              v-model="drawerKqfilterField.inRange"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in attendanceState"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工" class="row-padding-bottom">
            <el-input
              v-model="drawerKqfilterField.name"
              placeholder="请输入姓名"
              clearable
              @blur="drawerKqfilterField.name = changeValue($event)"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchKq"
              class="commonBtn"
            ></el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="drawerKqTableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          style="border: 1px solid #dfe6ec"
          :height="tableHeight"
          v-loading="isLoading"
        >
          <el-table-column prop="name" label="姓名" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.name || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="punchTime"
            label="打卡日期"
            align="center"
            width="100px"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.punchTime || '--' }}</p>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="address" label="打卡地址" align = "center" width='110px'> 
                        <template slot-scope="scope">
                            <span v-if="(scope.row.address+'').length < 13">
                              {{scope.row.address ? scope.row.address : "--"}}
                            </span>
                            <el-popover
                              v-else
                              placement="right"
                              title=""
                              width="200"
                              trigger="hover"
                              :content="scope.row.address">
                              <span class="addressBox" slot="reference" >
                                {{scope.row.address ? scope.row.address : "--"}}
                              </span> 
                            </el-popover> 
                        </template>
                    </el-table-column>  -->
          <el-table-column prop="address" label="打卡地址" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.address"
                :columnName="'address'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column prop="path" label="打卡图片" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.path"
                :preview-src-list="scope.row.list"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="inRange"
            label="状态"
            width="80px"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.inRange == 1" class="successColor"
                >范围内</span
              >
              <span v-else class="errorColor">范围外</span>
            </template>
            <!-- 1 内: 0 -->
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.remark || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="attType"
            label="打卡方式"
            width="80px"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.attType == 0">APP</span>
              <span v-else>考勤机</span>
            </template>
          </el-table-column>
          <!-- attType  0 APP -->
        </el-table>
        <!-- <Pagination ref="drawerKqPagination" @getList="getDrawerKqTableList" :filterField="drawerKqfilterField" :requestUrl="drawerKqRequestUrl"></Pagination> -->
      </el-col>
      <Pagination
        class="commomPadding"
        ref="drawerKqPagination"
        @getList="getDrawerKqTableList"
        :filterField="drawerKqfilterField"
        :requestUrl="drawerKqRequestUrl"
      ></Pagination>
    </el-drawer>
  </div>
</template>

<script>
import common from '../../kits/common'
export default {
  name: 'qyAttendance',
  props: ['companyId'],
  data() {
    return {
      titleText: '企业考勤',
      titleExplain:
        '企业人员可以在手机APP上打卡，支持设置考勤地点和打卡范围，支持查看考勤统计',
      // pathUrl:"/home/attendance/punchCardRuleList",
      btnText: '考勤规则设置',
      //下拉框数据

      //表格数据
      tableList: [],
      requestUrl: 'api-s/nc/monthstats/expand/monitor/attlist',
      time: [],
      orgId: '',
      //搜索条件
      filterField: {
        companyId: '',
      },
      //是否显示弹窗
      showDrawer: false,
      list: [],
      // value1:"",
      // value: [],
      orglist: [],
      // 弹窗搜素条件
      drawerKqfilterField: {
        companyId: '',
        year: '',
        month: '',
        name: '',
        inRange: '',
      },
      attendanceState: [
        {
          value: '1',
          label: '范围内',
        },
        {
          value: '0',
          label: '范围外',
        },
      ],
      drawerKqRequestUrl: 'api-att/nc/attendance/expand/attdetail',
      // 是否有打卡规则
      hasRule: false,
      showKqDrawer: false,
      drawerKqTableList: [],
      isShow: false, //列表加载
      loading: true,
      isLoading: true,
      tableHeight: window.innerHeight - 200,
    }
  },
  created() {
    this.filterField.companyId = this.companyId
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    // this.getOrglist();
    // this.getHasRule();
  },
  methods: {
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    //考勤次数
    showAttendanceDetail(row) {
      this.drawerKqfilterField.companyId = this.companyId
      this.drawerKqfilterField.year = row.year
      this.drawerKqfilterField.month = row.month
      this.showKqDrawer = true
      this.$nextTick(function () {
        this.drawerKqfilterField.name = ''
        this.drawerKqfilterField.inRange = ''
        this.$refs.drawerKqPagination.getTableListData()
        // this.$refs.pagination.getTableListData();
      })
    },
    getDrawerKqTableList(data) {
      this.drawerKqTableList = data
      this.list = []
      this.isLoading = false

      for (var i = 0; i < this.drawerKqTableList.length; i++) {
        this.list.push(this.drawerKqTableList[i].path)
      }
      for (var i = 0; i < this.drawerKqTableList.length; i++) {
        var container = this.list
        var frontArr = container.slice(0, i)
        var behindArr = container.slice(i, this.drawerKqTableList.length)
        var list = behindArr.concat(frontArr)
        this.drawerKqTableList[i].list = list
      }
    },
    searchKq() {
      this.$refs.drawerKqPagination.getTableListData()
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainBox {
    padding: 24px;
    .commomPaddingComtainer {
      padding: 0 24px 24px 24px;
    }
  }
}
.top {
  top: 177px;
}
.commomPadding {
  padding-top: 0;
  /deep/ .imgPrev {
    width: 50px;
  }
}
// 页面提示
.reminder {
  color: #666;
  font-size: 14px;
  border: 1px solid #ffaa00;
  background: #fffbe6;
  border-radius: 3px;
  padding: 5px 10px;
  i {
    color: #ffaa00;
  }
  .el-link {
    vertical-align: baseline;
  }
}
.addressBox {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
